<template>
  <div class="vote">
    <div class="title">{{ detailsData.assessmentTitle }}</div>
    <div class="sub_title">
      <div class="desc">{{ detailsData.assessmentSecondTitle }}</div>
      <div class="desc">考核单位：{{ detailsData.createByOrgName }}</div>
    </div>
    <van-notice-bar color="#666" background="#F2F2F2" left-icon="info-o">
      您所提交的内容完全保密，不会对外泄露！
    </van-notice-bar>
    <div class="filed">
      <!-- <template v-if="pageNum == 1">
        <p class="filed_title">领导测评表</p>
        <van-row v-for="(item, index) in detailsData.leaders" :key="index">
          <van-col class="orderNum" span="2">
            <span>*</span>
            {{ index + 1 }}
          </van-col>
          <van-col class="name" span="5">{{ item.userName }}</van-col>
          <van-col class="radio" span="17">
            <van-radio-group v-model="item.assessmentResult" direction="horizontal">
              <van-radio name="1" :icon-size="iconSize">好</van-radio>
              <van-radio name="2" :icon-size="iconSize">较好</van-radio>
              <van-radio name="3" :icon-size="iconSize">一般</van-radio>
              <van-radio name="4" :icon-size="iconSize">较差</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </template> -->
      <template v-if="pageNum == 2">
        <p class="filed_title">
          <!-- 非领导成员测评表 -->
        </p>
        <van-row v-for="(item, index) in detailsData.noLeaders" :key="index">
          <van-col class="orderNum" span="2">
            <span>*</span>
            {{ index + 1 }}
          </van-col>
          <van-col class="name" span="5">{{ item.userName }}</van-col>
          <van-col class="radio" span="17">
            <van-radio-group v-model="item.assessmentResult" direction="horizontal">
              <van-radio name="1" :icon-size="iconSize">好</van-radio>
              <van-radio name="2" :icon-size="iconSize">较好</van-radio>
              <van-radio name="3" :icon-size="iconSize">一般</van-radio>
              <van-radio name="4" :icon-size="iconSize">较差</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </template>
      <!-- <template v-if="pageNum == 3">
        <p class="filed_title">非公务员成员测评表</p>
        <van-row v-for="(item, index) in detailsData.nonCivil" :key="index">
          <van-col class="orderNum" span="2">
            <span>*</span>
            {{ index + 1 }}
          </van-col>
          <van-col class="name" span="5">{{ item.userName }}</van-col>
          <van-col class="radio" span="17">
            <van-radio-group v-model="item.assessmentResult" direction="horizontal">
              <van-radio name="1" :icon-size="iconSize">好</van-radio>
              <van-radio name="2" :icon-size="iconSize">较好</van-radio>
              <van-radio name="3" :icon-size="iconSize">一般</van-radio>
              <van-radio name="4" :icon-size="iconSize">较差</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </template> -->
      <div class="commit">
        <van-button round type="primary" color="#1989fa" v-if="showpageNum > 1" @click="onBack" plain>
          上一页
        </van-button>
        <van-button round type="primary" color="#1989fa" v-if="showpageNum < allpageNum" @click="onNextBefore(pageNum)">
          下一页
        </van-button>
        <van-button
          round
          type="primary"
          @click="onNextBefore(pageNum)"
          :loading="loading"
          :disabled="loading"
          loading-text="提交中..."
          v-if="showpageNum == allpageNum"
          color="#1989fa">
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { submitAssessment, getAssessmentDetail } from '@api/api-democratic.js'
export default {
  name: 'voteForm',
  components: {},
  props: {},
  data() {
    return {
      pageNum: 1, // 页面实际编码
      allpageNum: 0, // 总页面编码
      showpageNum: 1, // 当前页面编码
      list: [],
      iconSize: '18px',
      id: this.$route.query.assessmentId,
      form: {
        assessmentId: this.$route.query.assessmentId,
        leaderResultList: [],
        noLeaderResultList: [],
        nonCivilResultList: [],
        randomCode: '',
      },
      detailsData: {},
      loading: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initdata()
  },
  methods: {
    /* 初始化数据 */
    initdata() {
      getAssessmentDetail({ id: this.id }).then(res => {
        const data = res.data
        this.detailsData = { ...data }
        if (data.leaders && data.leaders.length !== 0) {
          this.allpageNum += 1
        }
        if (data.noLeaders && data.noLeaders.length !== 0) {
          this.allpageNum += 1
        }
        if (data.nonCivil && data.nonCivil.length !== 0) {
          this.allpageNum += 1
        }
        if (data.leaders && data.leaders.length !== 0) {
          this.pageNum = 1
        } else if (data.noLeaders && data.noLeaders.length !== 0) {
          this.pageNum = 2
        } else if (data.nonCivil && data.nonCivil.length !== 0) {
          this.pageNum = 3
        }
        // console.log(this.allpageNum)
      })
    },
    onNextBefore(step) {
      if (step === 1) {
        this.onNext('leaders', 'leaderResultList', '领导')
      } else if (step === 2) {
        this.onNext('noLeaders', 'noLeaderResultList', '非领导')
      } else if (step === 3) {
        this.onNext('nonCivil', 'nonCivilResultList', '非公务员')
      }
    },
    onNext(detailsObjName, formObjName, listDataName) {
      const leadersData = this.detailsData[detailsObjName]
      // 判断评分不能为空
      this.form[formObjName] = [...leadersData.filter(item => item.assessmentResult)]
      if (this.form[formObjName].length === 0 || this.form[formObjName].length !== leadersData.length) {
        this.$dialog.alert({
          message: `${listDataName}评测表必选项不能为空`,
          closeOnClickOverlay: true,
        })
        return false
      }
      /*
        判断投票的比例 “好” 的比例不能超过总人数的40%
        领导成员不进行 "好" 比例的校验 2022年10月13日14:54:16
      */
      if (listDataName !== '领导') {
        const goodData = this.form[formObjName].filter(item => item.assessmentResult - 0 === 1)
        if (this.form[formObjName].length === 2) {
          if (goodData.length === 2) {
            this.$dialog.alert({
              message: `${listDataName}成员投票只能有一个“好”`,
              closeOnClickOverlay: true,
            })
            return false
          }
        } else if (this.form[formObjName].length >= 3) {
          if (goodData.length / this.form[formObjName].length > Number(this.detailsData.rankLimit) / 100) {
            const overNum =
              goodData.length - Math.floor((this.form[formObjName].length * Number(this.detailsData.rankLimit)) / 100)
            this.$dialog.alert({
              message: `${listDataName}成员投票“好”的比例不能高于${this.detailsData.rankLimit}%。总人数${leadersData.length}人，现已评“好”${goodData.length}人，超出比例${overNum}人，请进行调整`,
              closeOnClickOverlay: true,
            })
            return false
          }
        }
      }

      if (this.showpageNum !== this.allpageNum) {
        this.showpageNum = this.showpageNum += 1
        this.pageNum = this.pageNum += 1
      } else {
        this.submitData()
      }
    },
    submitData() {
      this.loading = true
      this.form.randomCode = sessionStorage.randomCode
      submitAssessment({
        ...this.form,
      })
        .then(res => {
          // const data = res.data
          this.loading = false
          if (res.status === 200) {
            if (!res.message) {
              sessionStorage.removeItem('randomCode')
              const msg = encodeURIComponent('投票成功')
              this.$router.push(`/resultPage?msg=${msg}`)
            } else {
              this.$dialog.alert({
                message: res.message,
                closeOnClickOverlay: true,
              })
              // this.$toast.fail({
              //   duration: 5000, // 持续展示 toast
              //   closeOnClick: true,
              //   message: res.message,
              // });
            }
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    onBack() {
      this.pageNum = this.pageNum -= 1
      this.showpageNum = this.showpageNum -= 1
    },
  },
}
</script>

<style lang="scss" scoped>
.vote {
  text-align: center;
  // padding: 0 16px;
  font-size: 12px;
  .title {
    font-size: 16px;
    color: #333333;
    margin: 15px 0;
    padding: 0 16px;
  }
  .sub_title {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    .desc {
      // font-size: 14px;
      margin-bottom: 15px;
    }
  }
  .van-notice-bar {
    padding: 0 10px;
  }
  .filed {
    padding: 0 10px;
    margin-top: 15px;
    .filed_title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 17px;
    }
    .van-row {
      padding: 16px 0;
      border-bottom: 1px solid #f2f2f2;
      .orderNum {
        font-size: 13px;
        font-weight: bold;
        span {
          color: rgb(216, 0, 0);
        }
      }
      .name {
        text-align: left;
        font-weight: bold;
        // font-size: 14px;
      }
      .radio {
        .van-radio-group {
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
    .van-cell {
      height: 40px;
      line-height: 40px;
    }
  }
  .commit {
    margin: 40px 0 40px;
    display: flex;
    justify-content: space-around;
    .van-button {
      min-width: 130px;
    }
  }
}
</style>
